.main-page {
    display: grid;

    grid-template-columns: 1fr minmax(0, 5vw) 2fr minmax(0, 5vw) 1fr;

    text-align: center;

}


.main-page > * {
    grid-column: 3 / 4;

    margin-top: 0;
    margin-bottom: 2rem;
}

.main-page > *:not(.postlist-wrapper) {

    margin-top: 2rem;
    margin-bottom: 2rem;

}

h1 {
    font-weight: lighter;
}

.main-button-group {

    margin: auto;

    display: flex;
    justify-content: center;
    text-align: center;
}


@media only screen and (min-width : 320px) and (max-width : 480px) {
    .main-page {
        grid-template-columns: minmax(0px, 2vw) 2fr minmax(0px, 2vw);
    }

    .main-page > * {
        grid-column: 2 / 3;
    }
}

@media only screen and (min-width : 480px) and (max-width : 768px) {
    .main-page {
        grid-template-columns: 1fr minmax(0px, 2vw) 5fr minmax(0px, 2vw) 1fr;
    }

}

@media only screen and (min-width : 768px) and (max-width : 1224px) {
    .main-page {
        grid-template-columns: 1fr minmax(0px, 2vw) 4fr minmax(0px, 2vw) 1fr;
    }
}

@media only screen  and (min-width : 1224px) and (max-width: 1448px){
    .main-page {
        grid-template-columns: 1fr minmax(0px, 4vw) 3fr minmax(0px, 4vw) 1fr;
    }
}
